<template>
  <view class="yh-page">
	<view class="page">
		<view class="uni-form-item uni-column">
			<view class="title"><text class="red">*</text>手机号</view>
			<view class="uni-input-wrapper">
				<input class="uni-input"  v-model="loginForm.phone" placeholder="请输入手机号"  @input="inputClearInput(0)" />
				<text class="uni-icon" v-if="showClearIconArray[0]" @tap="handleToClearIcon(0)">&#xe434;</text>
			</view>
		</view>
		<view class="uni-form-item uni-column">
			<view class="title"><text class="red">*</text>密码</view>
			<view class="uni-input-wrapper">
				<input class="uni-input"  v-model="loginForm.password" placeholder="请输入密码"  :password="showPassword"  @input="inputClearInput(1)" />
				<text class="uni-icon" v-if="showClearIconArray[1]" @tap="handleToClearIcon(1)">&#xe434;</text>
				<uni-icons class="uni-icon" size="80rpx" v-if="!showPassword" type="eye" color="#999999" @tap="handleToShow()"></uni-icons>
				<uni-icons class="uni-icon" size="80rpx" v-if="showPassword" type="eye-slash" color="#999999" @tap="handleToShow()"></uni-icons>
			</view>
		</view>
		<br/>
		<button type="primary" @tap="handleToLoginByPassword()">登录</button>
	</view>
  </view>
</template>

<script>
import { loginByPhonePassword }  from '@/api/test/login/login.js'
import { validPhone } from '@/utils/validate'
export default 
{
  //计算属性
  computed:
  {

  },
  //监听
  watch:
  {
  },
  data() 
  {
    return{
		//注册表单
		loginForm:{
			//手机号
			phone:null,
			//密码
			password:null,
			
		},
		//控制是否显示清除按钮
		showClearIconArray:[false,false],
		//是否是密码
		showPassword:true
    };
  },
  //页面加载
  onLoad() 
  {

  },
  //页面显示
  onShow() 
  {

  },
  //页面初次渲染完成
  onReady()
  {

  },
  //页面隐藏
  onHide()
  {

  },
  //页面卸载
  onUnload()
  {

  },
  methods:
  {
	//监听输入事件
	inputClearInput(index)
	{
		//跟表单做一个映射
		let nameArray = ['phone','password']
		
		if(this.loginForm[nameArray[index]].length > 0)
		{
			this.showClearIconArray[index] = true
		}
		else
		{
			this.showClearIconArray[index] = false
		}
		
	},
	//点击清空图标
	handleToClearIcon(index)
	{
		//跟表单做一个映射
		let nameArray = ['phone','password']
		
		this.loginForm[nameArray[index]] = null
		this.showClearIconArray[index] = false
	},
	//切换显示密码
	handleToShow()
	{
		this.showPassword = !this.showPassword
	},
	//密码登录
	async handleToLoginByPassword()
	{
		//console.log(this.loginForm)
	    const result = await loginByPhonePassword(this.loginForm).then(res=>{
			return new Promise((resolve,reject)=>{
				if(res && res.code  == 0)
				{
					resolve(res)
				}
			})
		})
		
		const {token,openid} = result
		
		if(token)
		{
			this.$store.dispatch('user/loginSaveToken',token)
			
			if(openid)
			{
				this.$store.dispatch('user/authSaveOpenid',openid)
			}
			
			uni.switchTab({
				url:'/pages/Test/V1/tabBar/index/index'
			})
		}
	}
  }

}
</script>

<style lang="scss" scoped>
.page{
	width:calc(100% - 70rpx);
	padding:35rpx;
}
.title {
        padding: 5rpx 13rpx;
    }

.uni-input-wrapper {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #FFFFFF;
}

.uni-input {
	height: 80rpx;
	line-height: 80rpx;
	font-size: 36rpx;
	padding: 0rpx;
	flex: 1;
	background-color: #FFFFFF;
}

.uni-icon {
	font-family: uniicons;
	font-size: 80rpx;
	font-weight: normal;
	font-style: normal;
	width: 80rpx;
	height: 80rpx;
	line-height: 80rpx;
	color: #999999;
}

.uni-eye-active {
	color: #007AFF;
}

.red{
	color:red;
	font-weight: true;
}
</style>
